<template>
  <div>
    <div class="search">
      <img class="icon" src="https://youyang-cdn.mdshuzhi.com/upload/icon_search.png" />
      <input
        type="search"
        class="search-text"
        placeholder-class="placeholder"
        placeholder="搜索关键词找栏目"
        v-model="inputValue"
        @keyup.13="searchSubmit"
        @confirm="searchSubmit"
      />
    </div>
    <div class="defaultlists">
      <!-- 历史记录 -->
      <template v-if="searchstory.length>0">
        <div class="storylists">
          <div class="title">
            搜索历史
            <div class="clear-btn" @click="clearSearchStorage">
              <img
                class="search_icon"
                src="https://youyang-cdn.mdshuzhi.com/upload/icon_clear.png"
                lazy-load="true"
                mode="aspectFill"
              />清空记录
            </div>
          </div>
          <div class="con">
            <div v-for="(item,index) in searchstory" :key="index">
              <div class="item" :class="key==0?'item1':''" @click="searchvalue(item)">
                {{item}}
                <span class="delete" @click.stop="deleteBtn(item)"></span>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 热门搜索 -->
      <div class="storylists" v-if="hotsings.length!=0">
        <div class="title">
          搜索发现
          <div class="view" :class=" isview?'':'on'" @click="viewer"></div>
          <span v-if="isview" class="refesh" @click="refesh">换一批</span>
        </div>
        <div class="con">
          <template v-if="isview">
            <div v-for="(item,index) in hotsings" :key="index">
              <span
                class="item"
                :class="index==0 ?'item1':''"
                @click="searchvalue(item.title)"
              >{{item.title}}</span>
            </div>
          </template>
          <div class="hidecon" v-else>已隐藏推荐内容</div>
        </div>
      </div>
    </div>
    <div class="focuslists" v-if="focusbool">
      <scroller :on-infinite="infinite" ref="myscroller">
        <div
          class="item"
          v-for="(item,index) in focuslists"
          :key="index"
          @click="searchvalue2(item.title1)"
        >
          <div class="title">
            <div v-if="item.title" v-html="item.title"></div>
          </div>
          <div class="d">
            <div v-if="item.desc" v-html="item.desc"></div>
          </div>
          <img class="more" src="https://youyang-cdn.mdshuzhi.com/upload/icon_yinyong.png" />
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import { MessageBox } from "mint-ui";
export default {
  name: "columnSearch",
  data() {
    return {
      defaultlistsbool: true,
      searchstory: [],
      isview: true,
      inputValue: "",
      hotsings: [],
      focusbool: false,
      focuslists: [],
      focuspage: 1,
      focuspageSize: 10,
      focusisEnd: false, //这是一个判断是否加载的开关
    };
  },
  mounted() {
    window.addEventListener('mousewheel',this.handleScroll);
    //从本地获取搜索记录
    let searchstory = localStorage.getItem("columSearchData"); //搜索的内容
    if (searchstory) {
      if (searchstory.indexOf(",") != -1) {
        searchstory = searchstory.split(",");
      } else {
        searchstory = [searchstory];
      }
    } else {
      searchstory = [];
    }
    console.log("从本地获取搜索记录searchstory", searchstory);
    if (searchstory && searchstory.length > 0) {
      //进行倒序
      // searchstory = searchstory.reverse();
    }
    this.searchstory = searchstory;
    this.inputValue = "";
    this.focusbool = false;
    this.searchKeywordList();
  },
  destroyed(){
    window.removeEventListener('mousewheel',this.handleScroll)
  },
  methods: {
    handleScroll(e){
      let that = this  //此this指向的是vue
      console.log('此时是',e.wheelDelta)
      if (e.wheelDelta < 0) {
          that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
      } else {
        that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
      }
    },
    searchKeywordList() {
      controller
        .searchKeywordList({
          limit: 10,
        })
        .then((res) => {
          this.hotsings = res.baseData;
        });
    },
    // 上拉加载
    infinite(done) {
      setTimeout(() => {
        if (this.focusisEnd) {
          this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        } else {
          console.log("进行下一次加载操作");
          this.focusisEnd = true;
          done(); //进行下一次加载操作
        }
      }, 1500);
    },
    // 搜索按钮
    searchvalue(value) {
      console.log("searchvalue", value);
      this.$router.push({
        path: "/columnSearchList?search=" + value,
      });
    },
    searchvalue2(_SearchValue) {
      let localStorageValue = [];
      if (_SearchValue != "") {
        //添加搜索历史记录
        //调用API从本地缓存中获取数据
        localStorageValue = localStorage.getItem("columSearchData")
        if (localStorageValue) {
          if (localStorageValue.indexOf(",") != -1) {
            localStorageValue = localStorageValue.split(",");
          } else {
            localStorageValue = [localStorageValue];
          }
        } else {
          localStorageValue = [];
        }

        let tempSearchData = [];
        //过滤历史列表中相同的搜索记录
        for (let item of localStorageValue) {
          if (item != _SearchValue) {
            tempSearchData.push(item);
          }
        }
        //添加搜索文本进历史记录
        tempSearchData.push(_SearchValue);
        //保存至从本地缓存
        localStorage.setItem("columSearchData", tempSearchData);

        //跳转列表
        this.$router.push({
          path: "/columnSearchList?search=" + _SearchValue,
        });
      }
    },

    // 换一批按钮
    refesh() {
      this.searchKeywordList();
    },
    //切换眼睛
    viewer() {
      this.isview = !this.isview;
    },
    searchSubmit() {
      console.log("_SearchValue");
      let localStorageValue = [];
      let _SearchValue = this.inputValue;
      if (_SearchValue != "") {
        //添加搜索历史记录
        //调用API从本地缓存中获取数据
        localStorageValue = localStorage.getItem("columSearchData")
        if (localStorageValue) {
          if (localStorageValue.indexOf(",") != -1) {
            localStorageValue = localStorageValue.split(",");
          } else {
            localStorageValue = [localStorageValue];
          }
        } else {
          localStorageValue = [];
        }
        let tempSearchData = [];
        //过滤历史列表中相同的搜索记录
        for (let item of localStorageValue) {
          if (item != _SearchValue) {
            tempSearchData.push(item);
          }
        }
        //添加搜索文本进历史记录
        tempSearchData.push(_SearchValue);
        //保存至从本地缓存
        localStorage.setItem("columSearchData", tempSearchData);
        //跳转列表
        this.$router.push({
          path: "/columnSearchList?search=" + _SearchValue,
        });
      }
    },
    // 删除按钮
    deleteBtn(item) {
      var _SearchValue = item;
      let localStorageValue = [];
      if (_SearchValue != "") {
        localStorageValue = localStorage.getItem("columSearchData")
        if (localStorageValue) {
          if (localStorageValue.indexOf(",") != -1) {
            localStorageValue = localStorageValue.split(",");
          } else {
            localStorageValue = [localStorageValue];
          }
        } else {
          localStorageValue = [];
        }
        var index = localStorageValue.indexOf(_SearchValue);
        localStorageValue.splice(index, 1);
        //保存至从本地缓存
        localStorage.setItem("columSearchData", localStorageValue);
        this.searchstory = localStorageValue.reverse();
      }
    },
    //清除历史记录
    clearSearchStorage() {
      MessageBox.confirm("确定清除历史记录?").then((action) => {
        console.log(action);
        if (action == "confirm") {
          localStorage.setItem("columSearchData", []);
          this.searchstory = [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.orange {
  color: #e66d4d;
}

.search {
  padding: 24px;
  position: relative;

  .icon {
    width: 28px;
    height: 28px;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 48px;
    margin: auto;
  }

  .search-text {
    padding: 0 24px 0 77px;
    width: 100%;
    height: 64px;
    background: rgba(246, 246, 250, 1);
    border-radius: 32px;
    font-size: 28px;
    border: none;
  }
}

.defaultlists {
  padding: 10px 32px;

  .storylists {
    margin-bottom: 30px;
    overflow: hidden;

    .title {
      font-size: 32px;
      font-weight: 700;
      line-height: 50px;
      margin-bottom: 30px;
    }

    // 换一批
    .refesh {
      color: #a8acbb;
      font-size: 20px;
      float: right;
    }

    // 眼睛
    .view {
      display: inline-block;
      vertical-align: middle;
      margin-left: 2px;
      width: 28px;
      height: 28px;
      background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_hide.png)
        no-repeat center center;
      background-size: 100%;
    }

    .on {
      background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_show.png)
        no-repeat center center;
      background-size: 100%;
    }

    .clear-btn {
      color: #a8acbb;
      font-size: 20px;
      margin-left: 20px;
      display: inline-block;

      .search_icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        height: 24px;
      }
    }

    // 搜索发现的列表
    .item {
      display: inline-block;
      float: left;
      line-height: 60px;
      padding: 0 25px;
      background-color: #f6f6fa;
      border-radius: 30px;
      font-weight: 500;
      position: relative;
      text-align: center;
      margin-right: 24px;
      margin-bottom: 36px;
    }

    .delete {
      width: 28px;
      height: 28px;
      display: inline-block;
      position: absolute;
      z-index: 10;
      top: -10px;
      right: -10px;
      background-image: url("https://youyang-cdn.mdshuzhi.com/upload/icon_delete.png");
      background-size: cover;
    }
  }

  .hidecon {
    text-align: center;
    color: #a8acbb;
  }
}

.focuslists {
  position: fixed;
  z-index: 100;
  top: 110px;
  left: 0;
  right: 0;
  background-color: #fff;
  height: calc(100vh - 110px);
  /deep/ ._v-container{
    height: calc(100vh - 110px) !important;
    ._v-content{
      padding-bottom: 40px;
    }
  }
  .item {
    padding: 32px;
    position: relative;
    overflow: hidden;

    &:hover {
      background-color: #f6f6fa;
    }

    &:after {
      content: "";
      height: 0;
      display: inline-block;
      position: absolute;
      z-index: 10;
      bottom: 0;
      left: 32px;
      right: 0;
      margin: auto;
      border-bottom: #f2f2f2 1px solid;
    }

    .title {
      font-size: 30px;
      margin-bottom: 15px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-right: 160px;
    }

    .d {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-right: 160px;
      color: #a8acbb;
      font-size: 26px;

      &:before {
        content: "简";
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-top: 6px;
        background: rgba(168, 172, 187, 1);
        border-radius: 4px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        line-height: 24px;
        margin-right: 5px;
        float: left;
      }
    }

    .more {
      width: 20px;
      height: 20px;
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      right: 32px;
      margin: auto;
    }
  }
}
</style>
